import React from "react";
import {Card} from "antd";
import classes from "./index.module.css";
import PropTypes from "prop-types";

const iconHeart = "/assets/Good/heart.png";
const iconHeartActive = "/assets/Good/heartRed.png";
const iconShoppingBag = "/assets/Good/bag.png";
const iconShoppingBagActive = "/assets/Good/bagRed.png";

export default class CouponCard extends React.PureComponent {
    static propTypes = {
        cover: PropTypes.node.isRequired,
        title: PropTypes.string.isRequired,
        description: PropTypes.string,
        priceText: PropTypes.string
    };

    constructor(props) {
        super(props);
        this.state = {
            heartActive: false,
            shoppingBagActive: false
        };
    }

    render() {
        return (
            <Card className={classes.CouponCard}
                  bordered={false}
                  cover={this.props.cover}>
                <div className={classes.CardName}>{this.props.title}</div>
                <div className={classes.CardDescription}>{this.props.description}</div>
                <div className={classes.CardBottom}>
                    {this.props.priceText &&
                    <div className={classes.Price}>{this.props.priceText}</div>}
                    <div className={classes.IconWrapper}>
                        <img alt="card" src={this.state.heartActive ? iconHeartActive : iconHeart}/>
                        <img alt="card" src={this.state.shoppingActive ? iconShoppingBagActive : iconShoppingBag}/>
                    </div>
                </div>
            </Card>
        );
    }
}